<%--
  Created by IntelliJ IDEA.
  User: King
  Date: 2020/9/9
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--===============================================================================================-->
    <link rel="icon" type="image/png" href="${pageContext.request.contextPath}/static/images/25.jpg"/>
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/simple/vendor/bootstrap/css/bootstrap.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/simple/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/simple/vendor/animate/animate.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/simple/vendor/css-hamburgers/hamburgers.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/simple/vendor/select2/select2.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/simple/css/util.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/simple/css/main.css">

    <style>

        .imgcontainer{
            width: 100%;
            height: 180px;
            /*border: 1px black solid;*/
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }


        .img1{
            width: 200px;
            height: 200px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 50%;
            position: absolute;
            top: 130px;
        }

        @media (max-width: 992px){
            .img1{
                top:100px;
            }
        }

        @media (max-width: 768px) {
            .img1{
                top:60px;
            }
        }

        @media (max-width: 576px) {
            .img1{
                top:35px;
            }
        }

    </style>
    <!--===============================================================================================-->
</head>
<body>

<div class="limiter">
    <div class="container-login100">

        <div class="imgcontainer">
            <img id="headImg" class="img1 js-tilt" src="${pageContext.request.contextPath}/static/simple/images/img-01.png" onerror="this.src='${pageContext.request.contextPath}/static/simple/images/img-01.png'"  alt="IMG" >
        </div>
        <div class="wrap-login100">

            <form class="login100-form validate-form" action="">
<%--
                <span class="login100-form-title">

                </span>--%>
                <div class="wrap-input100 validate-input" data-validate = "username is required: ex@abc.xyz">
                    <input class="input100" type="text" name="" placeholder="Username" id="username">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
							<i class="fa fa-user" aria-hidden="true"></i>
						</span>
                </div>

                <div class="wrap-input100 validate-input" data-validate = "Password is required">
                    <input class="input100" type="password" name="" placeholder="Password" id="password">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
							<i class="fa fa-lock" aria-hidden="true"></i>
						</span>
                </div>
                <div class="wrap-input100 validate-input" data-validate = "Verification code is required">
                    <input class="input100" type="text" name="code" placeholder="Verification code" id="code">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
							<i class="fa fa-code" aria-hidden="true"></i>
						</span>
                </div>
                <div class="wrap-input100">
                    <center>
                        <img id="myCode" src="${pageContext.request.contextPath}/code/getCode" onclick="changeCode();">
                    </center>
                </div>
                <div class="wrap-input100">
                    <input type="radio" name="role" value="Student" checked />学生
                    <input type="radio" name="role" value="Teacher" />老师
                </div>
                <div class="container-login100-form-btn">
                    <button class="login100-form-btn" id="login" type="button">
                        Login
                    </button>
                </div>

                <div class="text-center p-t-12">
						<span class="txt1">
							Forgot
						</span>
                    <a class="txt2" href="">
                        Username / Password?
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>



<!--===============================================================================================-->
<script src="${pageContext.request.contextPath}/static/simple/vendor/bootstrap/js/popper.js"></script>
<!--===============================================================================================-->
<script src="${pageContext.request.contextPath}/static/simple/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/simple/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="${pageContext.request.contextPath}/static/simple/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="${pageContext.request.contextPath}/static/simple/vendor/tilt/tilt.jquery.min.js"></script>
<script >

    $('.js-tilt').tilt({
        scale: 1.1
    });

    /*更改验证码*/
    function changeCode(){
        $("#myCode").prop("src","${pageContext.request.contextPath}/code/getCode?"+(new Date()).getTime());
    };

    /*改变用户名更改头像*/
    /*$("#username").blur(function(){
        $("#headImg").attr("src","${pageContext.request.contextPath}/static/images/"+$("#username").val()+".jpg");
    });*/

    /*验证码和用户信息验证*/
    $("#login").click(function(){
        var username = $("#username");
        var password = $("#password");
        var role = $("input[type='radio']:checked").val();
        var code = $("#code");
        console.log(role);

        /*判断输入框是否为空*/
        if(showValidate(username,"Username") && showValidate(password,"Password") && showValidate(code,"Verification code")){
            /*不为空，发送ajax请求，先验证验证码*/
            $.ajax({
                url:"${pageContext.request.contextPath}/code/checkCode",
                type:"post",
                data:{
                    code:code.val()
                },
                dataType:"json",
                success:function(info){
                    //console.log(info.flag);

                    if(info.code == '0'){
                        /*验证码验证成功，验证用户信息*/
                        console.log('验证码验证成功');
                        $.ajax({
                            url: "${pageContext.request.contextPath}/user/login",
                            type: "post",
                            data: {
                                username: username.val(),
                                password: password.val(),
                                role:role
                            },
                            success: function (info) {
                                console.log(info.code);
                                if (info.code == '0') {
                                    /*用户信息验证成功，进入用户首页*/
                                    console.log('用户验证成功，正在进入首页');
                                    window.location.href="${pageContext.request.contextPath}/page/index";
                                } else {
                                    /*用户信息验证失败，清空输入框数据，并更换图片*/
                                    showError(username,"Username");
                                    showError(password,"Passsword");
                                    $("#code").val('');
                                    changeCode();
                                    return false;
                                }
                            }
                        });
                    }else{
                        /*验证码验证失败，清空验证码输入框，并给出提示信息*/
                        showError(code,"Verification code");
                    }
                }
            });
        }
        return false;



    });

    function showError(input,message){
        $(input).val('');
        let thisAlert = $(input).parent();
        $(thisAlert).attr("data-validate",message +" is incorrect");
        $(thisAlert).addClass('alert-validate');
    }

    function showValidate(input,message) {
        var c = $(input).val();
        var thisAlert = $(input).parent();
        let flag = true;
        if(c == ''){
            $(thisAlert).attr("data-validate", message + " is required");
            $(thisAlert).addClass('alert-validate');
            return false;
        }
        return true;
    }
</script>
<!--===============================================================================================-->
<script src="${pageContext.request.contextPath}/static/simple/js/main.js"></script>

</body>
</html>

